import React, { PureComponent } from 'react';
import { connect } from 'dva';
import {Button,Radio,Icon,Menu,Dropdown,Row,Col,Layout,Breadcrumb} from 'antd';
import ImageWrapper from '../../components/ImageWrapper';

const {Header,Footer,Sider,Content} = Layout;
const {SubMenu} = Menu;

@connect(({list}) => ({
    list,
}))

export default class Test extends PureComponent {
  state={
    size:"default",
    loading:false,
    collapsed:false,
  }

  componentDidMount(){
    const {dispatch} = this.props;
    dispatch({
        type: 'list/fetch',
    });
  }

  handleSizeChange = (e)=>{
    this.setState({
      size:e.target.value,
    })
  }

  handleClickLoading = ()=>{
    // this.setState(prevState=>({
    //   loading:!prevState.loading,
    // }))
    this.setState({
      loading:true,
    })
  }

  handleClickMenu = (e)=>{
    console.log(e)
  }

  onCollapse = (collapsed)=>{
    this.setState({collapsed})
  }

  toggle = () => {
    this.setState({
      collapsed: !this.state.collapsed,
    });
  }

  render(){
    // const { list } = this.props;// list 指的是相当于数据流
    // const pageList = list.list;// 从数据流中取出了具体的变量
    const {size,loading} = this.state;
    const menu = (
      <Menu onClick={this.handleClickMenu}>
        <Menu.Item key="1">操作1</Menu.Item>
        <Menu.Item key="2">操作2</Menu.Item>
        <Menu.Item key="3">操作3</Menu.Item>
      </Menu>
    )
    const DemoBox = props => <p style={{height:props.value,background:"#1890ff"}}>{props.children}</p>;

    return (
      <div>
        <h3>Hello Ant Design Pro.</h3>
        <ImageWrapper src="https://os.alipayobjects.com/rmsportal/mgesTPFxodmIwpi.png" desc="示意图" />
        <hr />
        <h3>Button/Icon：<strong>通过设置 Button 的属性来产生不同的按钮样式，推荐顺序为：type -> shape -> size -> loading -> disabled</strong></h3>
        <Radio.Group value={size} onChange={this.handleSizeChange}>
          <Radio.Button value="large">Large</Radio.Button>
          <Radio.Button value="default">Default</Radio.Button>
          <Radio.Button value="small">Small</Radio.Button>
        </Radio.Group>
        <Button size={size} type="primary">Primary</Button>
        <Button size={size} type="danger">Danger</Button>
        <Button size={size} type="dashed">Dashed</Button>
        <Button size={size}>Default</Button>
        <Button size={size} shape="circle" icon="search" />
        <Button size={size} type="dashed" shape="circle" icon="search" />
        <Button size={size} type="primary" icon="search">Search <Icon type="question-circle-o" /></Button>
        <Button size={size} icon="download" />
        <Button.Group size={size}>
          <Button>
            <Icon type="left" />
            Prev
          </Button>
          <Button>
            Next
            <Icon type="right" />
          </Button>
        </Button.Group>
        <Button.Group>
          <Button ghost>Ghost</Button>
          <Button disabled>Disabled</Button>
        </Button.Group>
        <Button loading={loading} onClick={this.handleClickLoading}>Click Loading</Button>
        <div>
          <Button type="primary">主操作</Button>
          <Button type="danger">误操作<Icon type="google" spin /></Button>
          <Dropdown overlay={menu}>
            <Button>actions<Icon type="down" /></Button>
          </Dropdown>
          <Button type="dashed" href="https://www.baidu.com" target="_blank">Href</Button>
        </div>

        <hr />
        <h3>Layout：</h3>
        <Row style={{background:"white"}} gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}>
          <Col span={8}><div style={{background:"#1890ff",color:"white"}}>col-8</div></Col>
          <Col span={8}><div style={{background:"#1890ff",color:"white"}}>col-8</div></Col>
          <Col span={8}><div style={{background:"#1890ff",color:"white"}}>col-8</div></Col>
        </Row>
        <Row style={{background:"white"}} gutter={32}>
          <Col span={6}><div style={{background:"#1890ff",color:"white"}}>col-6</div></Col>
          <Col span={6}><div style={{background:"#1890ff",color:"white"}}>col-6</div></Col>
          <Col span={6}><div style={{background:"#1890ff",color:"white"}}>col-6</div></Col>
          <Col span={6}><div style={{background:"#1890ff",color:"white"}}>col-6</div></Col>
        </Row>
        <Row>
          <Col span={12} offset={6} style={{background:"#1890ff",color:"white",textAlign:"center"}}>offset-6</Col>
        </Row>
        <Row>
          <Col span={18} push={6}>col-18 col-push-6[后撤6个单位]</Col>
          <Col span={6} pull={18}>col-6 col-pull-18[回迁18个单位]</Col>
        </Row>
        <p>flex justify</p>
        <Row type="flex" justify="center">
          <Col span={6}>sub-element align center</Col>
          <Col span={6}>sub-element align center</Col>
        </Row>
        <Row type="flex" justify="space-between">
          <Col span={4}>col-4</Col>
          <Col span={4}>col-4</Col>
          <Col span={4}>col-4</Col>
          <Col span={4}>col-4</Col>
        </Row>
        <p>flex align</p>
        <Row type="flex" justify="center" align="middle">
          <Col span={4}><DemoBox value={100}>col-4</DemoBox></Col>
          <Col span={4}><DemoBox value={50}>col-4</DemoBox></Col>
          <Col span={4}><DemoBox value={120}>col-4</DemoBox></Col>
          <Col span={4}><DemoBox value={80}>col-4</DemoBox></Col>
        </Row>

        <h3>Layout</h3>
        <Layout>
          <Header>Header</Header>
          <Content>Content</Content>
          <Footer>Footer</Footer>
        </Layout>
        <Layout>
          <Header>
            <Menu
              theme="dark"
              mode="horizontal"
              style={{ lineHeight: '64px' }}
            >
              <Menu.Item key="1">nav 1</Menu.Item>
              <Menu.Item key="2">nav 2</Menu.Item>
              <Menu.Item key="3">nav 3</Menu.Item>
            </Menu>
          </Header>
          <Layout>
            <Sider>Sider</Sider>
            <Content>Content</Content>
          </Layout>
          <Footer>Footer</Footer>
        </Layout>

        <h2>顶部-侧边布局-通栏</h2>
        <Layout>
          <Sider
            trigger={null}
            collapsible
            collapsed={this.state.collapsed}
            // onCollapse={this.onCollapse}
            breakpoint={
              {
                xs: '480px',
                sm: '576px',
                md: '768px',
                lg: '992px',
                xl: '1200px',
                xxl: '1600px',
              }
            }
          >
            <Menu
              theme="dark"
              mode="inline"
              defaultSelectedKeys={['1']}
              defaultOpenKeys={['sub1']}
              style={{ height: '100%', borderRight: 0 }}
            >
              <SubMenu key="sub1" title={<span><Icon type="user" />subnav 1</span>}>
                <Menu.Item key="1">nav 1</Menu.Item>
                <Menu.Item key="2">nav 2</Menu.Item>
                <Menu.Item key="3">nav 3</Menu.Item>
              </SubMenu>
              <SubMenu key="sub2" title={<span><Icon type="google" />subnav 2</span>}>
                <Menu.Item key="4">nav 1</Menu.Item>
                <Menu.Item key="5">nav 2</Menu.Item>
                <Menu.Item key="6">nav 3</Menu.Item>
              </SubMenu>
            </Menu>
          </Sider>
          <Layout>
            <Header className="header">
              <Icon
                className="trigger"
                type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'}
                onClick={this.toggle}
                style={{color:"white"}}
              />
            </Header>
            <Breadcrumb style={{ margin: '16px 0' }}>
              <Breadcrumb.Item>Home</Breadcrumb.Item>
              <Breadcrumb.Item>Blog</Breadcrumb.Item>
              <Breadcrumb.Item>Contact</Breadcrumb.Item>
            </Breadcrumb>
            <Content style={{ background: '#fff', padding: 24, margin: 0, minHeight: 280 }}>
              hey super star!
            </Content>
          </Layout>
        </Layout>
      </div>
    )
  }
}
